<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="3" :sm="24">
              <a-form-item>
                <a-select placeholder="请选择省" v-model="queryParam.province" @change="onProvinceChange">
                  <a-select-option :value="item.provinceid" v-for="item in provinceList" :key="item.id">{{
                    item.province
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="3" :sm="24">
              <a-form-item>
                <a-select placeholder="请选择市" v-model="queryParam.city" @change="onCityChange">
                  <a-select-option :value="item.cityid" v-for="item in cityList" :key="item.id">{{
                    item.city
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="3" :sm="24">
              <a-form-item>
                <a-select placeholder="请选择区" v-model="queryParam.area">
                  <a-select-option :value="item.areaid" v-for="item in areaList" :key="item.id">{{
                    item.area
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handleSearch(true)" icon="search">查询</a-button>
              </span>
            </a-col>
            <a-col :md="2" :sm="24" :offset="9">
              <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        :pagination="pagination"
      >
        <template slot="img_url" slot-scope="text">
          <a-avatar shape="square" :size="64" icon="skin" :src="text" />
        </template>
        <a-tag :color="text == 1 ? 'blue' : 'red'" slot="status" slot-scope="text">{{ text | statusFilter }}</a-tag>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleDelete(record)">删除</a>
          </template>
        </span>
      </s-table>

      <create-form ref="createModal" @ok="handleSearch" :addAction="addAction" :editAction="editAction" :extraPramas="extraPramas"/>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { appliancePriceEdit, appliancePriceList, appliancePriceAdd, appliancePriceDel } from '@/api/appliance'
import { provinceLink, cityLink, areaLink } from '@/api/notControl'
import formTableMixin from '@/mixins/formTableMixin'
import CreateForm from '@/views/clothes/modules/clothesPriceForm'

const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '价格',
    dataIndex: 'price',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '省',
    dataIndex: 'province'
  },
  {
    title: '市',
    dataIndex: 'city'
  },
  {
    title: '区',
    dataIndex: 'area'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

const STATUS = {
  1: '是',
  0: '否'
}

export default {
  name: 'AppliancePrice',
  mixins: [formTableMixin],
  components: {
    CreateForm
  },
  data () {
    this.columns = columns
    this.editAction = appliancePriceEdit
    this.addAction = appliancePriceAdd
    this.delAction = appliancePriceDel
    this.listAction = parameter =>
      appliancePriceList(parameter).then(res => {
        const data = res.data.data
        this.info = res.data.info
        data.forEach(item => {
          item.name = this.info.name
          item.appliance_id = this.info.id
        })
        this.extraPramas = { appliance_id: this.info.id }
        return res
      })
    return {
      provinceList: [],
      cityList: [],
      areaList: [],
      extraPramas: {}
    }
  },
  filters: {
    statusFilter (key) {
      return STATUS[key]
    }
  },
  created () {
    provinceLink().then(res => {
      this.provinceList = res.data
    })
  },
  methods: {
    onProvinceChange (provinceid) {
      return cityLink({ provinceid }).then(res => {
        this.cityList = res.data
      })
    },
    onCityChange (cityid) {
      return areaLink({ cityid }).then(res => {
        this.areaList = res.data
      })
    }
  }
}
</script>
